<template>
  <div id="app">
    <div id="fixed" v-show="!show">
      <div class="blank"></div>
      <a-icon
        type="menu"
        class="menu"
        :style="{ fontSize: '20px', color: 'gray' }"
        @click="show=true"
      />
    </div>
    <a-anchor class="myanchor" v-show="show">
      <div class="top">
        <img src="@/assets/images/logo.png" alt class="logo" />
        <a-icon
          type="menu"
          class="menu"
          :style="{ fontSize: '20px', color: '#08c' }"
          @click="show=false"
        />
      </div>
      <a-anchor-link href="#waiguan" title="产品外观" />
      <a-anchor-link href="#xingneng" title="产品性能" />
      <a-anchor-link href="#youshi" title="产品优势" />
      <a-anchor-link href="#changjing" title="应用场景" />
      <a-anchor-link href="#xuanze" title="外观选择" />
    </a-anchor>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

<style lang="scss">
#app {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}
.myanchor {
  .ant-anchor-ink {
    margin: 0 10px;
    &::before {
      background: none;
    }
  }
  a {
    margin-left: 6px;
  }
}
.img {
  display: block;
  width: 100%;
}
.text-center {
  text-align: center;
}
.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.margin-tb {
  margin: 20px 0;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 100px;
}
.menu {
  margin-right: 20px;
}
#fixed {
  width: 100%;
  height: 56.25px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
}
</style>